<%@ page import="org.springframework.web.context.request.SessionScope" %><%--
  Created by IntelliJ IDEA.
  User: caixueguang
  Date: 2020/5/17
  Time: 22:57
  To change this template use File | Settings | File Templates.
--%>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
    <title>简历</title>

    <% String contextPath = request.getContextPath(); %>

    <%--<script src="<%=contextPath%>/js/jquery.min.js" type="text/javascript" />--%>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <script type="text/javascript">
    </script>
    <script>

        var param = {};
        $(function () {
            //通过ajax向后台请求数据，并刷新当前页面
            findAll();
        })

        function findAll() {
            param = {};
            $.ajax({
                url: '<%=contextPath%>/resume/findAll',
                type: 'POST',
                data: '',
                contentType: 'application/json;charset=utf-8',
                dataType: 'json',
                success: function (data) {
                    var  trhtml = '';
                    $("#resume_table_body").text(trhtml);
                    $.each(data, function(index,resume){
                        trhtml+=
                            "<tr>" +
                            "<td>" + resume.id + "</td>" +
                            "<td>" + resume.name + "</td>" +
                            "<td>" + resume.phone + "</td>" +
                            "<td>" + resume.address + "</td>" +
                            // "<td><button onclick='del(" + resume.id + ")'>删除</button><button style='left: 2px' onclick='update(" + resume.id + "," + resume.name + "," + resume.phone + "," + resume.address + ")'>更新</button></td>" +
                            "<td><button onclick='del(" + resume.id + ")'>删除</button><button style='left: 2px' onclick='update(this)'>更新</button></td>" +
                            "</tr>"
                    });
                    $("#resume_table_body").append(trhtml);
                }
            })
        };

        function save() {
            var id = $("#add_id").val();
            var name = $("#add_name").val();
            var phone = $("#add_phone").val();
            var address = $("#add_address").val();

            param = {
                id: id,
                name: name,
                address: address,
                phone: phone
            };
            $.ajax({
                url: '<%=contextPath%>/resume/save',
                type: 'POST',
                data: param,
                success: function (data) {
                    console.log(data);
                    findAll();
                }
            });

            $("#add_id").val('');
            $("#add_name").val('');
            $("#add_phone").val('');
            $("#add_address").val('');
            $('#myModal').modal('hide');
        };

        function update(obj) {

            var tr = obj.parentElement.parentElement;
            tr = $(obj).parent().parent().find("td");
            var u_id = tr.eq(0).text();
            var u_name = tr.eq(1).text();
            var u_phone = tr.eq(2).text();
            var u_address = tr.eq(3).text();

            $("#myModalLabel").text("更新");

            console.log(u_id + "," + u_name + "," + u_phone + "," + u_address);
            $("#add_id").val(u_id);
            $("#add_name").val(u_name);
            $("#add_phone").val(u_phone);
            $("#add_address").val(u_address);

            $('#myModal').modal('show');
        }

        function del(resumeId) {
            param = {
                id:resumeId,
            };
            $.ajax({
                url: '<%=contextPath%>/resume/delete',
                type: 'POST',
                data: param,
                success: function (data) {
                    console.log(data);
                    findAll();
                }
            })
        };

    </script>

</head>
<body>
    <div>
        <h3>欢迎<%= session.getAttribute("username")%></h3>
        <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">新增简历</button>
        <table class="table table-hover" id="resumeTable" style="border: 1px #dddddd">
            <thead>
                <th>ID</th>
                <th>姓名</th>
                <th>联系方式</th>
                <th>地址</th>
                <th>操作</th>
            </thead>
            <tbody id="resume_table_body">
                <%--<c:forEach items="${ sessionScope.resumeList }" var="resume" varStatus="status">
                    <tr>
                        <td><span>${resume.id}</span></td>
                        <td>${resume.name}</td>
                        <td>${resume.phone}</td>
                        <td>${resume.address}</td>
                        <td><a>删除</a><a style="left: 2px;">修改</a></td>
                    </tr>
                </c:forEach>--%>
            </tbody>
        </table>
        <!-- 模态框（Modal） -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h4 class="modal-title" id="myModalLabel">新增</h4>
                    </div>
                    <div class="modal-body">
                        <span id="add_id" style="display: none"></span>
                        <div>
                            <label>姓名</label>
                            <input type="text" id="add_name" name="name"/>
                        </div>
                        <div>
                            <label>电话</label>
                            <input type="text" id="add_phone" name="phone"/>
                        </div>
                        <div>
                            <label>地址</label>
                            <input type="text" id="add_address" name="address"/>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary" onclick="save()">提交更改</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div>
        <!-- /.modal -->
    </div>
</body>
</html>
